<template>
  <div class="home">
    <el-page-header title="企业网站门户管理系统" content="首页" />
    <el-card class="head-card">
      <el-row :gutter="20">
        <el-col :span="2">
          <el-avatar :size="70" :src="avatarImg" />
        </el-col>
        <el-col :span="8" style="line-height: 70px; text-align: left">
          <h3>欢迎 {{ username }} 回家，{{ welcomeText }}</h3>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="card">
      <template #header>
        <div class="card-header">
          <span>公司产品</span>
        </div>
      </template>
      <el-carousel
        :interval="3000"
        loop="true"
        type="card"
        height="400px"
        v-if="loopList.length > 0"
      >
        <el-carousel-item v-for="item in loopList" :key="item._id">
          <div
            class="imgUrl"
            :style="{
              backgroundImage: `url( http://localhost:3000${item.cover})`,
            }"
          >
            <h3 text="2xl" justify="center">{{ item.title }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<script setup>
// import  request from '../../util/request.js'
import store from "@/store/index.js";
import { computed, onMounted, ref } from "vue";
import request from "@/util/request";

const { username, role, avatar, introduction, gender } = store.state.userInfo;
const avatarImg = computed(() =>
  avatar
    ? "http://localhost:3000" + avatar
    : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);

const welcomeText = computed(() => {
  return new Date().getHours < 12
    ? "要开心开心每一天😀！"
    : "喝杯咖啡提提神吧！";
});

const loopList = ref([]);
onMounted(() => {
  getTableData();
});

const getTableData = async () => {
  const res = await request.get("/adminapi/product/productList");
  if (res.data.ActionType === "OK") {
    loopList.value = res.data.data;
    console.log(res.data.data);
  }
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  .head-card {
    margin-top: 30px;
  }
  .card {
    margin-top: 30px;
    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }

    .imgUrl {
      width: 100%;
      height: 100%;
      background-size: 100%;
    }
  }
}
</style>
